<template>
	<DtModal @register="register" @save="save">
		<div class="gap-2 flex flex-wrap">
			<AButton type="primary" @click="setModalProps({ title: '我是动态的标题' })">改变弹框标题</AButton>
			<AButton type="primary" @click="setModalProps({ width: 700 })">改变弹框宽度</AButton>
			<AButton type="primary" @click="setModalProps({ closable: false })">是否显示右上角图标</AButton>
			<AButton type="primary" @click="setModalProps({ minHeight: 300 })">内容区域最小高度</AButton>
			<AButton type="primary" @click="setModalProps({ draggable: true })">弹框支持拖拽</AButton>
			<AButton type="primary" @click="setModalProps({ defaultFullscreen: true })">默认是否全屏</AButton>
			<AButton type="primary" @click="setModalProps({ canFullscreen: false })">是否展示全屏按钮</AButton>
			<AButton type="primary" @click="setModalProps({ useWrapper: false })">内容是否需要默认paading</AButton>
			<AButton type="primary" @click="setModalProps({ showOkBtn: false })">是否展示确认按钮</AButton>
			<AButton type="primary" @click="setModalProps({ showCancelBtn: false })">是否展示关闭按钮</AButton>
			<AButton type="primary" @click="setModalProps({ okText: '测试' })">确认按钮文字描述</AButton>
			<AButton type="primary" @click="setModalProps({ maskClosable: true })">支持点击蒙层关闭</AButton>
			<AButton type="primary" @click="setModalProps({ loading: true, loadingTip: 'LOADING...' })">显示加载遮罩</AButton>
			<AButton type="primary" @click="setFooter">设置弹框按钮</AButton>
			<AButton type="primary" @click="closeModal">关闭弹框</AButton>
		</div>
	</DtModal>
</template>

<script lang="ts" setup>
	import { useModal } from '@zm-pkg/ui'

	const [register, { setModalProps, closeModal }] = useModal({
		title: '测试标题',
		width: '50%',
		closable: true,
		minHeight: 200,
		draggable: false,
		defaultFullscreen: false,
		canFullscreen: true,
		loading: false,
		loadingTip: '加载中...',
		useWrapper: true,
		showOkBtn: true,
		showCancelBtn: true,
		okText: '保存',
		mask: true,
		maskClosable: false,
		closeFunc: async () => true,	// 这里做一些校验
		afterClose: () => {
			// 这里做一些缓存清理操作
		}
	}, (data) => {

	})


	/**
	 * 动态设置弹框按钮
	 */
	function setFooter() {
		setModalProps({
			footer: [
				{ label: '保存', preIcon: 'mdi:content-save', flag: 'OK', type: 'primary', loading: ref(true) },
				{ label: '提交审批', preIcon: 'ic:baseline-rocket-launch', type: 'primary', onClick: audit },
				{ label: '关闭', preIcon: 'mdi:close', flag: 'CANCEL' },
			]
		})
	}

	function audit() {
		alert('您点击了提交审批')
	}

	function save() {
		alert('您点击了保存按钮, 我准备传点数据到父组件')
		closeModal({
			text: '我来传点数据'
		})
	}

</script>
